<template>
    <content-two title="点击排行">
        <template slot="content">
            <div id="click-rank">
                <template v-for="(item, index) in articleList">
                    <div
                        :key="item._id"
                        class="pointer rank-item"
                        @click="showArticleDetail(index,item)"
                    >
                        <div
                            class="ellipsis title"
                            v-text="item.title"
                        ></div>
                        <div class="info">
                            <div class="center img">
                                <img
                                    v-lazy="item.coverImagesUrl"
                                    alt=""
                                >
                            </div>
                            <div
                                class="line-ellipsis content"
                                v-text="item.synopsis"
                            ></div>
                        </div>
                    </div>
                </template>
                <div
                    v-if="articleList.length <= 0"
                    class="center no-data"
                >
                    暂无数据
                </div>
            </div>
        </template>
    </content-two>
</template>

<script>
    import ContentTwo from './ContentTwo';
    export default {
        components: {
            ContentTwo
        },
        props: {
            type: {
                type: String,
                default: '/index'
            },
            articleList: {
                type: Array,
                default: () => []
            }
        },
        data () {
            return {
            };
        },
        methods: {
            /**
             * 查看文件详情
             * @param {Number} index 索引
             * @param {Object} row 当前文章信息
             */
            showArticleDetail (index, row) {
                this.$router.push({
                    path: `${ this.type }/articleDetail`,
                    query: {
                        articleId: row._id
                    }
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
#click-rank {
    .rank-item {
        padding-bottom: 15px;
        font-size: @font-size-medium;
        &:not(:last-of-type){
            border-bottom: 1px solid #ccc;
        }
        &:hover {
            .info {
                img{
                    transform: scale(1.1);
                }
                 .content{
                    color: @color-text;
                }
            }
        }
        .title {
            line-height: 40px;
        }
        .info{
            display: flex;
            height: 92px;
            .img{
                width: 92px;
                height: 100%;
                flex-shrink: 0;
                overflow: hidden;
                img{
                    width: 100%;
                    transition: all .5s ease;
                }
            }
            .content {
                flex-grow: 1;
                margin-left: 10px;
                line-height: 24px;
                color: @color-text-g;
            }
        }
    }
}
</style>
